<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache" />
    <title>表单发布</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="static/css/aui.2.0.css">
    <style>
    /*demo样式*/

    #filePicker .webuploader-pick {
        padding: 6px 12px;
        display: block;
        position: relative;
        display: inline-block;
        cursor: pointer;
        background: transparent;
        padding: 0;
        /* color: #fff; */
        /* text-align: center; */
        /* border-radius: 3px; */
        /* overflow: hidden; */
    }


    #uploader-list .thumbnail {
        width: 5.5rem;
        height: 5.5rem;
    }

    #uploader-list .thumbnail img {
        width: 100%;
    }

    .uploader-list {
        width: 100%;
        overflow: hidden;
    }

    .file-item {
        float: left;
        position: relative;
        margin: 0 .5rem .5rem 0;
        padding: .2rem;
    }

    .file-item .error {
        position: absolute;
        top: .2rem;
        left: .2rem;
        right: .2rem;
        background: red;
        color: white;
        text-align: center;
        height: 1rem;
        font-size: .7rem;
        line-height: 2.15rem;
    }

    .file-item .info {
        position: absolute;
        left: 4px;
        bottom: 4px;
        right: 4px;
        height: 20px;
        line-height: 20px;
        text-indent: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .6rem;
        z-index: 10;
    }

    .upload-state-done:after {
        content: "\f00c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 1.6rem;
        position: absolute;
        bottom: 0;
        right: .2rem;
        color: #4cae4c;
        z-index: 99;
    }

    .file-item .progress {
        position: absolute;
        right: .2rem;
        bottom: .2rem;
        height: .15rem;
        left: .2rem;
        height: .2rem;
        overflow: hidden;
        z-index: 15;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .file-item .progress span {
        display: block;
        overflow: hidden;
        width: 0;
        height: 100%;
        background: #d14 url(static/images/progress.png) repeat-x;
        -webit-transition: width 200ms linear;
        -moz-transition: width 200ms linear;
        -o-transition: width 200ms linear;
        -ms-transition: width 200ms linear;
        transition: width 200ms linear;
        -webkit-animation: progressmove 2s linear infinite;
        -moz-animation: progressmove 2s linear infinite;
        -o-animation: progressmove 2s linear infinite;
        -ms-animation: progressmove 2s linear infinite;
        animation: progressmove 2s linear infinite;
        -webkit-transform: translateZ(0);
    }

    @-webkit-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: .85rem 0;
        }
    }

    @-moz-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: .85rem 0;
        }
    }

    @keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: .85rem 0;
        }
    }

    a.travis {
        position: relative;
        top: -4px;
        right: 15px;
    }
    </style>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="background-color: #3c445e;">
        <a onclick="history.back()" class="aui-pull-left">
            <i class="aui-iconfont aui-icon-left"></i>
        </a>
        <div class="aui-title">回复</div>
    </header>
    <form action="">
        <div>
            <div class="publish-article-title">
                <div class="title-tips">标题</div>
                <input type="text" id="title" placeholder="文章标题">
            </div>
            <div class="aui-padded f12 txt-muted">
                <span>引用 x楼 白老师</span>
                <div class="quote-content">照片说明：攀登四姑娘山三峰，在二峰和三峰之间的垭口,太阳就慢慢露了出来，雪山上的日出，真</div>
            </div>
            <div class="publish-article-content">
                <div class="article-content" id="content"></div>
            </div>
        </div>
        <div class="aui-padded aui-border-t bg-f">
            <div id="fileList" class="uploader-list aui-row-padded aui-row"></div>
        </div>
        <div class="aui-border-tb bg-f" id="container">
            <img class="aui-padded" src="static/images/icon_smile.png" style="width: 2.5rem;vertical-align: top;" onclick="toOpenFace()">
            <span id="filePicker">
                <img class="aui-padded" src="static/images/icon_img.png" style="width: 2.5rem;vertical-align: top;">
            </span>
            <div class="aui-pull-right">
                <button type="submit" class="aui-btn aui-btn-info aui-margin-t-10 aui-margin-r-15">发布</button>
            </div>
        </div>
    </form>
</body>
<script src="static/js/loader.js"></script>
<script type="text/javascript">
window.serverUrl = './get.php'; //获取签名接口
window.filename_pre = '34_'; //上传返回的文件名前缀，届时请替换成USER_ID

// .setGlobalDefaults({BasePath:'/123/'})
$LAB
    .css('static/css/arteditor.css')
    // .script('static/js/plupload-2.1.2/js/plupload.full.min.js','static/js/upload.js')
    .css('https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css')
    .script('https://cdn.staticfile.org/webuploader/0.1.5/webuploader.js').wait(function() {

        var objdata = {
            upfile_endpoint: 'http://bmbbs.oss-cn-hangzhou.aliyuncs.com', //上传地址
            upfile_nametype: 'random_name', //local_name random_name  上传文件的文件名类型
            upfile_defaltdir: '' //上传路径 多层  格式  upload/floder1/floder2
        };

        jQuery(function() {
            jQuery.ajax({
                type: "post",
                url: "./get.php",
                timeout: 10000,
                data: {
                    "dir": objdata.upfile_defaltdir
                },
                success: function(str) {
                    if (str) {
                        try {
                            var re = JSON.parse(str);
                            objdata.osssignature = {
                                'key': re.dir,
                                'policy': re.policy,
                                'OSSAccessKeyId': re.accessid,
                                'success_action_status': '200', //让服务端返回200,不然，默认会返回204
                                'signature': re.signature
                            };
                        } catch (e) {
                            alert("系统错误");
                        }

                    } else {
                        alert("结果为空");
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("ajax error");
                },
                complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
                    if (status == 'timeout') {
                        alert('请求超时，请稍后再试！');
                    }
                },
                async: false
            });

            var $ = jQuery,
                $list = $('#fileList'),
                // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

                // 缩略图大小
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio,

                // Web Uploader实例
                uploader;

            // 初始化Web Uploader
            uploader = WebUploader.create({

                // 自动上传。
                auto: false,

                // swf文件路径
                swf: '/js/Uploader.swf',

                // 文件接收服务端。
                server: objdata.upfile_endpoint,

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 只允许选择文件，可选。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },

                formData: {
                    uid: 123
                },
                // dnd : '#dndArea',    //指定Drag And Drop拖拽的容器，如果不指定，则不启动
                // paste : '#uploader', //添加截屏的图片
                swf: '/tbpt/plugin/ueditor/third-party/webuploader/Uploader.swf',
                chunked: false,
                chunkSize: 512 * 1024,
            });

            // 当有文件添加进来的时候
            uploader.on('fileQueued', function(file) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail aui-col-xs- aui-col-5">' +
                    // '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                );

                $list.append($li);

                // 创建缩略图
                // uploader.makeThumb( file, function( error, src ) {
                //     if ( error ) {
                //         $img.replaceWith('<span>不能预览</span>');
                //         return;
                //     }

                //     $img.attr( 'src', src );
                // }, thumbnailWidth, thumbnailHeight );
                uploader.upload();
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function(file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function(file) {
                var url = objdata.upfile_endpoint + "/" + file.path;
                var thumb = objdata.upfile_endpoint + "/" + file.path + '?x-oss-process=image/resize,m_fill,h_100,w_100';
                $('#' + file.id).html('<img class="img-max" src="' + thumb + '" data-original="' + url + '" />')
                // .addClass('upload-state-done');
            });

            // 文件上传失败，现实上传出错。
            uploader.on('uploadError', function(file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function(file) {
                $('#' + file.id).find('.progress').remove();
            });

            uploader.on('uploadBeforeSend', function(obj, data, headers) {
                var file = obj.file;
                //TODO   如果同一个页面上传多次  需要处理签名逻辑   不用每次都签名
                //赋值参数
                data = $.extend(data, objdata.osssignature);
                //设置文件路径
                data.key = data.key + calculate_object_name(data.name, objdata.upfile_nametype);
                console.log(data.key)
                obj.filepath = data.key;
                file.path = data.key;
                headers['Access-Control-Allow-Origin'] = "*";
            });
            //得到文件名 type local_name random_name
            function calculate_object_name(filename, type) {
                if (type && type == 'local_name') {
                    return "${filename}";
                } else { //随机生成文件名
                    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';　　
                    var maxPos = chars.length;　　
                    var random_string = '';　　
                    for (i = 0; i < 10; i++) {　　
                        random_string += chars.charAt(Math.floor(Math.random() * maxPos));
                    }
                    var pos = filename.lastIndexOf('.')
                    var suffix = ''
                    if (pos != -1) {
                        suffix = filename.substring(pos);
                    }
                    return random_string + new Date().getTime() + suffix;
                }
            }
        });

    })
    .script('static/js/arteditor.js').wait(function() {
        var arteditor = $('#content').artEditor({
            imgTar: '#imageUpload',
            limitSize: 5, // 兆
            showServer: false,
            data: {},
            uploadField: 'image',
            breaks: false,
            placeholader: '请输入回复内容',
            validHtml: ["<br/>"],
            formInputId: 'target',
        });

        toOpenFace = function() {
            var face = openFace(function() {
                var img = ' <img src="' + this.src + '" style="max-width:100%;" /> '
                arteditor.insertImage(img);
                face.closed();
            })
        };


        // $('#ossfile').on('click', 'img.eui-wmax', function() {
        //     var img = '<p> <img src="' + this.src + '" style="max-width:100%;" /> </p>'
        //     arteditor.insertImage(img);
        // })
        $('#fileList').on('click', 'img', function() {

            var img = '<p> <img src="' + this.dataset.original + '" style="max-width:100%;" /> </p>'
            arteditor.insertImage(img);
        })

        $('#submit').on('click', function() {
            $('#content').val($('.article-content').html())
            $('#reply_add').submit();
        })
    })
</script>

</html>